<template>
	<skeleton v-if="!isLoading"></skeleton>
	<view v-else class="content">
		<!--  生活建议 饮食建议 -->
		<view class="LifeAdvice mt45">
			<view class="tipView">
				<view class="tipLine ml28" style="background-color: #1BC91A;"></view>
				<text class="LifeAdvice_title" style="margin-left: 18rpx;">生活建议</text>
			</view>
			<view style="margin-left: 56rpx;margin-top: 30rpx;">
				<text class="LifeAdvice_content">{{lifeAdvice.description.slice(0,55)}}...</text>
				<text class="LookDetailText" @click="toLifeDetail()">查看详情</text>
			</view>
		</view>

		<view class="LifeAdvice mt45">
			<view class="tipView">
				<view class="tipLine ml28"></view>
				<text class="LifeAdvice_title" style="margin-left: 18rpx;">饮食建议</text>
			</view>
			<view style="margin-left: 56rpx;margin-top: 30rpx;">
				<text class="LifeAdvice_content">{{dietAdvice.description.slice(0,70)}}...</text>
				<text class="LookDetailText" @click="toDietDetail()">查看详情</text>
			</view>
		</view>

		<!-- 饮食建议 -->
		<view class="card3">
			<view class="card3_item1">
				<view class="card3_item1_time flex-c">
					<text class="card3_item1_time_T1">早餐</text>
					<text class="card3_item1_time_T2">ZAO CAN</text>
				</view>
				<view class="card3_item1_food flex-c ML33" v-for="(item,index) in breakfast" :key="index">
					<image :src="item.accessUrl"></image>
					<text>{{item.description}}</text>
				</view>
			</view>
			<view class="card3_item1">
				<view class="card3_item1_time flex-c">
					<text class="card3_item1_time_T1">午餐</text>
					<text class="card3_item1_time_T2">WU CAN</text>
				</view>
				<view class="card3_item1_food flex-c ML33" v-for="(item,index) in lunch" :key="index">
					<image :src="item.accessUrl"></image>
					<text>{{item.description}}</text>
				</view>
			</view>
			<view class="card3_item1">
				<view class="card3_item1_time flex-c">
					<text class="card3_item1_time_T1">晚餐</text>
					<text class="card3_item1_time_T2">WAN CAN</text>
				</view>
				<view class="card3_item1_food flex-c ML33" v-for="(item,index) in dinner" :key="index">
					<image :src="item.accessUrl"></image>
					<text>{{item.description}}</text>
				</view>
			</view>
		</view>
		<!-- 菜谱 -->
		<view class="card_cookBook">
			<view class="card_cookBook_item" v-for="(item,index) in menu" :key="index">
				<image :src="item.image"></image>
				<view class="card_cookBook_item_R">
					<text class="card_cookBook_item_RT_text">{{item.title}}</text>
					<view style="margin-top: 10rpx;">
						<text class="LifeAdvice_content">{{item.description.slice(0,20)}}...</text>
						<text class="LookDetailText" @click="toMenuDetail(index)">查看详情</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 运动建议 -->
		<view class="LifeAdvice mt45">
			<view class="tipView">
				<view class="tipLine ml28"></view>
				<text class="LifeAdvice_title" style="margin-left: 18rpx;">运动建议</text>
			</view>
			<view style="margin-left: 56rpx;margin-top: 30rpx;">
				<text class="LifeAdvice_content">{{sportAdvice.description.slice(0,55)}}...</text>
				<text class="LookDetailText" @click="toSportDetail()">查看详情</text>
			</view>
		</view>
		<scroll-view class="scroll-view_row" scroll-x="true" scroll-left="120" show-scrollbar="false">
			<view class="scroll-view_item" v-for="(item,index) in sportDetail" :key="index"
				@click="toSportCardDetail(index)">
				<image :src="item.image" mode=""></image>
				<view class="scroll-view_item_view">
					<text>{{item.description.slice(0,15)}}</text>
				</view>
			</view>
		</scroll-view>
		<view class="card_bottom">
			<view class="card_bottom_L">
				<view style="width: 10rpx;height: 30rpx;background-color: #F5212D;border-radius: 50px;"></view>
				<text
					style="font-size: 40rpx;font-family: Source Han Sans CN;font-weight: bold;color: #000000;margin-left: 17rpx;">药膳</text>
				<view
					style="width: 5rpx;height: 37rpx;background-color: #000000;border-radius: 50px;margin-left: 17rpx;">
				</view>
				<text
					style="font-size: 38rpx;font-family: Source Han Sans CN;font-weight: normal;color: #000000;margin-left: 23rpx;">{{tonicDiet.description}}</text>
			</view>
			<image src="../../../static/image/suggest/icon_look_red.png"
				style="width: 130rpx;height: 53rpx;margin-right: 30rpx;" @click="toTonicDietDetail()"></image>
		</view>
	</view>
</template>

<script>
	import * as api from '@/api/login';
	import skeleton from '../../../components/skeleton/skeleton_suggest.vue'
	export default {
		components: {
			skeleton
		},
		data() {
			return {
				userId: '',
				keyWord: '', //关键词
				// 生活建议
				lifeAdvice: {
					description: '',
					accessUrl: ''
				},
				// 饮食建议
				dietAdvice: {
					description: '',
					accessUrl: ''
				},
				// 运动建议
				sportAdvice: {
					description: '',
					accessUrl: ''
				},
				// 运动详情
				sportDetail: [],
				// 药膳
				tonicDiet: {
					description: '',
					accessUrl: ''
				},
				// 早餐
				breakfast: {},
				lunch: {},
				dinner: {},
				// 菜谱
				menu: [],
				isLoading: false,
			};
		},
		onLoad() {
			this.userId = this.$store.state.userInfo.currentUser.userId;
			//取出关键词...
			let info = this.$store.state.userBaseInfo
			this.getKeyWord(info.stroke, info.hypertension, info.highBloodHyperglycemia, info.highBloodLipids, info
				.heartDisease);
		},
		methods: {
			// 提取病史关键词
			getKeyWord(isStroke, isHBPressure, isHyperglycemia, isHyperlipidemia, isHeartDisease) {
				let keyWord = '';
				if (isStroke) keyWord += '#中风史';
				if (isHBPressure) keyWord += '#高血压';
				if (isHyperglycemia) keyWord += '#高血糖';
				if (isHyperlipidemia) keyWord += '#高血脂';
				if (isHeartDisease) keyWord += '#心脏病';
				if (!isStroke && !isHBPressure && !isHyperglycemia && !isHyperlipidemia && !isHeartDisease) keyWord = '#无病史';
				// 在此处获取一些建议
				this.getSuggest(keyWord);
			},
			// 生活建议
			toLifeDetail() {
				let that = this;
				uni.navigateTo({
					url: '../../square/contentDetail/contentDetail?url=' + that.lifeAdvice.accessUrl
				});
			},
			//饮食建议
			toDietDetail() {
				let that = this;
				uni.navigateTo({
					url: '../../square/contentDetail/contentDetail?url=' + that.dietAdvice.accessUrl
				});
			},
			// 菜谱
			toMenuDetail(index) {
				let that = this;
				uni.navigateTo({
					url: '../../square/contentDetail/contentDetail?url=' + that.menu[index].accessUrl
				});
			},
			// 运动建议
			toSportDetail() {
				let that = this;
				uni.navigateTo({
					url: '../../square/contentDetail/contentDetail?url=' + that.sportAdvice.accessUrl
				});
			},
			// 运动详情 详细
			toSportCardDetail(index) {
				let that = this;
				uni.navigateTo({
					url: '../../square/contentDetail/contentDetail?url=' + that.sportDetail[index].accessUrl
				});
			},
			// 药膳
			toTonicDietDetail() {
				let that = this;
				uni.navigateTo({
					url: '../../square/contentDetail/contentDetail?url=' + that.tonicDiet.accessUrl
				});
			},
			/*  获取信息  整个页面的全部内容
			 *---生活建议   饮食建议  早餐 午餐 晚餐 菜谱 运动建议 ~~具体运动~~ 药膳
			 */
			getSuggest(keyWord) {
				let that = this;
				let userId = this.userId;
				let data = {
					userId: userId,
					action: 'getAdviceOnRecuperation',
					params: {
						keyList: [{
								channelName: "生活建议",
								type: "contents",
								count: 1,
								keyWord: keyWord
							},
							{
								channelName: "饮食建议",
								type: "contents",
								count: 1,
								keyWord: keyWord
							},
							{
								channelName: "早餐",
								type: "images",
								count: 2,
								keyWord: keyWord
							},
							{
								channelName: "午餐",
								type: "images",
								count: 4,
								keyWord: keyWord
							},
							{
								channelName: "晚餐",
								type: "images",
								count: 3,
								keyWord: keyWord
							},
							{
								channelName: "菜谱",
								type: "contents",
								count: 2,
								keyWord: keyWord
							},
							{
								channelName: "运动建议",
								type: "contents",
								count: 1,
								keyWord: keyWord
							},
							{
								channelName: "运动详情",
								type: "contents",
								count: 2,
								keyWord: keyWord
							},
							{
								channelName: "药膳",
								type: "contents",
								count: 1,
								keyWord: keyWord
							},
						]
					}
				};
				api.getAdviceOnRecuperation(data).then(function(res) {
						console.log('getAdviceOlnRecuperation success', res);
						if (res.data.code == 2000) {
							that.lifeAdvice.description = res.data.data.生活建议[0].description;
							that.lifeAdvice.accessUrl = res.data.data.生活建议[0].accessUrl;

							that.dietAdvice.description = res.data.data.饮食建议[0].description;
							that.dietAdvice.accessUrl = res.data.data.饮食建议[0].accessUrl;

							that.sportAdvice.description = res.data.data.运动建议[0].description;
							that.sportAdvice.accessUrl = res.data.data.运动建议[0].accessUrl;
							// 早餐
							that.breakfast = res.data.data.早餐;
							that.lunch = res.data.data.午餐;
							that.dinner = res.data.data.晚餐;
							// 药膳
							that.tonicDiet.description = res.data.data.药膳[0].title;
							that.tonicDiet.accessUrl = res.data.data.药膳[0].accessUrl;
							// 菜谱
							that.menu = res.data.data.菜谱;
							// 运动详情
							that.sportDetail = res.data.data.运动详情;
							that.isLoading = true
						}
					})
					.catch(function(error) {
						console.log('getAdviceOnRecuperation fail', error);
					});
			}
		}
	};
</script>
<style>
	@import url('../../style/suggestStyle.css');

	page {
		background-color: #f5f5f5;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.flex-c {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.card1 {
		width: 700rpx;
		height: auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.card1_item {
		width: 338rpx;
		height: 400rpx;
		border-radius: 15px;
		background-size: 100% 100%;
		position: relative;
	}

	.background-image {
		height: 100%;
		position: absolute;
		width: 100%;
		left: 0px;
		top: 0px;
	}

	.card1_item_X {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0px;
		top: 0px;
	}

	.card1_item_top {
		margin: 44rpx auto 0;
		width: 280rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.card1_item_top_text {
		font-size: 38rpx;
		font-family: Source Han Sans SC;
		font-weight: bold;
		color: #ffffff;
	}

	.card1_item_count1 {
		font-size: 120rpx;
		font-family: Roboto;
		font-weight: bold;
		color: #ffffff;
		margin: auto auto 61rpx 34rpx;
	}

	.card1_item_count2 {
		font-size: 100rpx;
		font-family: Roboto;
		font-weight: bold;
		color: #ffffff;
		margin: auto auto 61rpx 20rpx;
	}
</style>